<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业生产收率预测系统 - 主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- 使用统一样式文件替代多个CSS文件 -->
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <button class="sidebar-toggle">
                <i class="fas fa-chevron-left"></i>
            </button>
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span class="logo-text">异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item" data-title="首页">
                    <i class="fas fa-home nav-icon"></i>
                    <span class="nav-text">首页</span>
                </a>
                <a href="qd-display.html" class="nav-item" data-title="主控面板">
                    <i class="fas fa-tachometer-alt nav-icon"></i>
                    <span class="nav-text">主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item" data-title="模型应用价值">
                    <i class="fas fa-chart-line nav-icon"></i>
                    <span class="nav-text">模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item" data-title="系统架构设计">
                    <i class="fas fa-project-diagram nav-icon"></i>
                    <span class="nav-text">系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item" data-title="数据流设计">
                    <i class="fas fa-database nav-icon"></i>
                    <span class="nav-text">数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item" data-title="模型部署与应用">
                    <i class="fas fa-cogs nav-icon"></i>
                    <span class="nav-text">模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item" data-title="用户界面设计">
                    <i class="fas fa-desktop nav-icon"></i>
                    <span class="nav-text">用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item" data-title="收率预测">
                    <i class="fas fa-flask nav-icon"></i>
                    <span class="nav-text">收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item" data-title="关键参数监控">
                    <i class="fas fa-eye nav-icon"></i>
                    <span class="nav-text">关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item" data-title="在线分析">
                    <i class="fas fa-chart-bar nav-icon"></i>
                    <span class="nav-text">在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item" data-title="模型性能">
                    <i class="fas fa-chart-pie nav-icon"></i>
                    <span class="nav-text">模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item" data-title="模型详情">
                    <i class="fas fa-info-circle nav-icon"></i>
                    <span class="nav-text">模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item" data-title="模型更新">
                    <i class="fas fa-sync-alt nav-icon"></i>
                    <span class="nav-text">模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item" data-title="系统配置">
                    <i class="fas fa-sliders-h nav-icon"></i>
                    <span class="nav-text">系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item" data-title="技术文档">
                    <i class="fas fa-book nav-icon"></i>
                    <span class="nav-text">技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img class="user-avatar" src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span class="user-name">管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 移动端菜单遮罩层 -->
        <div class="sidebar-overlay"></div>
        
        <!-- 移动端菜单按钮 -->
        <button class="mobile-toggle">
            <i class="fas fa-bars"></i>
        </button>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>异烟酸生产收率预测系统</h1>
                    <p>基于机器学习的工业生产智能预测平台</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">5</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <div class="page-content">
                    <div class="section-title">系统概述</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-info-circle"></i>
                            欢迎使用异烟酸生产收率预测系统
                        </div>
                        <p>本系统基于机器学习和数据挖掘技术，通过分析异烟酸生产过程中的多维参数数据，构建高精度预测模型，实现对异烟酸最终收率的精确预测，为生产工艺优化和智能制造转型提供数据驱动支持。</p>
                        <p class="mt-3">系统采用XGBoost算法，通过特征工程和模型优化，实现了0.000129的均方误差，显著提升了预测精度。</p>
                    </div>
                    
                    <div class="section-title">系统功能模块</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-tachometer-alt"></i>
                            </div>
                            <div class="info-card-title">主控面板</div>
                            <div class="info-card-text">
                                实时监控生产状态、关键指标和预警信息，提供全局视图。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="info-card-title">模型应用价值</div>
                            <div class="info-card-text">
                                展示模型的经济效益、质量提升和工艺优化价值。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-project-diagram"></i>
                            </div>
                            <div class="info-card-title">系统架构设计</div>
                            <div class="info-card-text">
                                系统的整体架构、技术栈和组件设计说明。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="info-card-title">数据流设计</div>
                            <div class="info-card-text">
                                数据采集、处理、存储和应用的全流程设计。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-flask"></i>
                            </div>
                            <div class="info-card-title">收率预测</div>
                            <div class="info-card-text">
                                基于当前参数预测最终产品收率，提供优化建议。
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-eye"></i>
                            </div>
                            <div class="info-card-title">关键参数监控</div>
                            <div class="info-card-text">
                                监控影响收率的关键参数，实时预警异常情况。
                            </div>
                        </div>
                    </div>
                    
                    <div class="section-title">快速入口</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-chart-bar"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">在线分析</div>
                                <div class="value-desc">实时分析当前生产数据，发现潜在问题</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-chart-pie"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">模型性能</div>
                                <div class="value-desc">查看模型预测精度和性能指标</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">模型更新</div>
                                <div class="value-desc">使用新数据更新和优化预测模型</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-book"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">技术文档</div>
                                <div class="value-desc">查看系统详细技术文档和使用指南</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入统一交互脚本 -->
    <script src="scripts/unified.js"></script>
</body>
</html> 